<template>
  <div class="spl-container">
    <breadcrumb :data="pathData"></breadcrumb>
    <div class="substituteSalary">
      <div class="emp-title">
        <i class="ic-substitute fl mr-30"></i>
        <el-row :gutter="22">
          <el-col :span="6"><p>台账编号：<span v-text="serialNumber"></span></p></el-col>
          <el-col :span="6"><p>账单年月：<span v-text="$global.dateToStrByFormart(totalInfo.yearDate,'yyyy-MM')"></span></p></el-col>
          <el-col :span="5"><p>扣缴义务人：<span v-text="totalInfo.obligorName"></span></p></el-col>
          <!--<el-col :span="5"><p>账单总金额：<span v-text="$global.milliFormat(totalInfo.totalAmount,2)"></span>元</p></el-col>
          <el-col :span="5"><p>服务费金额：<span>$global.milliFormat(totalInfo.totalAmount,2)</span>元</p></el-col>-->
        </el-row>
      </div>
      <div class="search-row clearfix mt-15">
        <div class="salary-type ml-0">
          <div class="type"><p class="mt-7">工<br>资<br>薪<br>金</p></div>
          <div class="content">
            <p class="text">实发合计：<span>{{totalInfo.details|filterAmountByType('60004001','totalAmount')}}</span>元</p>
            <p class="text">个税合计：<span>{{totalInfo.details|filterAmountByType('60004001','taxAmount')}}</span>元</p>
          </div>
        </div>
       <div class="salary-type">
          <div class="type"><p class="mt-16">年<br>终<br>奖</p></div>
          <div class="content">
            <p class="text">实发合计：<span>{{totalInfo.details|filterAmountByType('60004002','totalAmount')}}</span>元</p>
            <p class="text">个税合计：<span>{{totalInfo.details|filterAmountByType('60004002','taxAmount')}}</span>元</p>
          </div>
        </div>
        <div class="salary-type">
          <div class="type"><p class="mt-7">劳<br>务<br>报<br>酬</p></div>
          <div class="content">
            <p class="text">实发合计：<span>{{totalInfo.details|filterAmountByType('60004003','totalAmount')}}</span>元</p>
            <p class="text">个税合计：<span>{{totalInfo.details|filterAmountByType('60004003','taxAmount')}}</span>元</p>
          </div>
        </div>

        <div class="fl mt-70 ml-30">
         <span v-text="'总金额： '+$global.milliFormat(totalInfo.totalAmount,2)+'元'"></span>
         <span class="inlineBlock ml-60" v-text="'总人数：'+totalInfo.totalNumber"></span>
        </div>
      </div>

      <div>
        <dTable @fetch="getTableData" ref="empTable" :tableHeight="tableHeight" :showIndex="true">
          <el-table-column prop="employeeName" label="员工姓名" min-width="220" header-align="center" align="left"></el-table-column>
          <el-table-column prop="employeeIdCard" label="证件号码" min-width="320" header-align="center" align="left"></el-table-column>
          <el-table-column prop="telephone" label="手机号码" min-width="320" header-align="center" align="left"></el-table-column>
          <el-table-column prop="deptName" label="组织部门" min-width="320" header-align="center" align="left"></el-table-column>
          <el-table-column prop="presidentName" label="岗位" min-width="200" header-align="center" align="left"></el-table-column>
          <el-table-column prop="empBankAccount" label="银行账号" min-width="320" header-align="center" align="left"></el-table-column>
          <el-table-column prop="itemTypeDesc" label="收入类型" min-width="180" header-align="center" align="left"></el-table-column>
          <el-table-column prop="incomeDate" label="费用年月" min-width="200" header-align="center" align="center"></el-table-column>
          <el-table-column prop="plannedAmount" label="应发金额" min-width="280" header-align="center" align="right"></el-table-column>
          <el-table-column prop="taxAmount" label="应缴个税" min-width="280" header-align="center" align="right"></el-table-column>
          <el-table-column prop="actualAmount" label="实发金额" min-width="280" header-align="center" align="right"></el-table-column>
          <el-table-column prop="serviceFee" label="服务费" min-width="280" header-align="center" align="right"></el-table-column>
          <el-table-column prop="socialSecurityAmount" label="个人社保" min-width="280" header-align="center" align="right"></el-table-column>
          <el-table-column prop="accfundAmount" label="个人公积金" min-width="280" header-align="center" align="right"></el-table-column>
          <el-table-column v-for="(item, index) in salaryItems" :prop="item" :label="item" min-width="200" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.salaryItems==null?'':scope.row.salaryItems[item]"></p>
            </template>
          </el-table-column>
          <el-table-column prop="residenceType" label="累计子女教育扣除" min-width="300" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018001']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="residenceType" label="累计继续教育扣除" min-width="300" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018005']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="entryDate" label="累计大病医疗扣除" min-width="300" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018006']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="residenceType" label="累计赡养老人扣除" min-width="300" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018004']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="residenceType" label="累计住房租金扣除" min-width="300" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018003']"></p>
            </template>
          </el-table-column>
          <el-table-column prop="residenceType" label="累计住房贷款扣除" min-width="300" header-align="center" align="right">
            <template slot-scope="scope">
              <p v-text="scope.row.taxAdditionalItems['70018002']"></p>
            </template>
          </el-table-column>
          <template slot="pagination-btns">
            <el-button type="primary" class="opt-btn s-btn" icon="ic-export" @click="exportData">导出</el-button>
          </template>
        </dTable>
      </div>
    </div>
  </div>
</template>
<script>
  import dTable from '../../../components/common/table'
  export default {
    components: {
      dTable
    },
    data () {
      return {
        // 导航
        pathData: [
          { name: '薪酬管理' },
          { name: '薪酬台账', path: '/salaryAccount' },
          { name: '查看台账明细', path: '/salaryAccountDetails' }
        ],
        salaryItems: [],
        serialNumber: '',//台账编号
        totalInfo: {}
      }
    },
    created () {
      this.serialNumber = this.$route.query.serialNumber
      this.getSalaryItems()
      this.$nextTick(() => {
        this.getTableData()
        this.getTotalInfo()
      })
    },
    filters:{
      filterAmountByType(value,type,propertyName){
        if (value != undefined && value.length > 0) {
          var current = 0.00
          value.forEach(item => {
            if (type == item.itemType) {
              current = item
            }
          })
          var number = current[propertyName]
          if(number==null || number===""){
            number = 0
          }
          return (Math.round(parseFloat(number)*Math.pow(10,2))/Math.pow(10,2)).toFixed(2)
            .replace(/\d+/, function(s){
              return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
            });
        }
        return 0.00
      }
    },
    computed: {
      tableHeight: function () {
        return this.$global.bodyHeight - 330 + 'px'
      }
    },
    methods: {
      formatDateFun (row, column, cellValue, index) {
        return cellValue == null ? '-' : this.$global.dateToStr(cellValue)
      },
      getSalaryItems (){
        this.$http({
          url: '/salary/insteadBill/getDynamitHead',
          method: 'get',
          params: {}
        }).then(({data}) => {
          this.salaryItems = data.data==null?[]:data.data
        })
      },
      //获取台账统计信息
      getTotalInfo(){
          this.$http({
            url: '/salary/platformBills',
            method: 'get',
            params:{serialNumber: this.serialNumber}
          }).then(({data}) => {
            this.totalInfo = data
          })
      },
      getTableData () {
        var params = [{ property: 'serialNumber', value: this.serialNumber }]
        this.$refs.empTable.fetch(params, 'post', '/salary/platformBills/details/page')
      },
      //导出
      exportData(){
        var obj = {serialNumber:this.serialNumber}
        this.$downloadFile('/salary/accounting/export', 'post', obj,this.$global.EXCEL)
      }
    }
  }
</script>
<style lang="less" scoped>
  .spl-container {
    padding: 25px 15px;
  }
</style>
